import React, { Component } from "react";
import { Select, Space } from "antd";
import PropTypes from "prop-types";
import { apiGetDBAreaList } from "@/request/serviceStation";

class TheAreaEditor extends Component {
  state = {
    provinceList: [],
    cityList: [],
    areaList: [],
    province: "",
    provinceName: "",
    city: "",
    cityName: "",
    area: "",
    areaName: "",
  };

  componentDidMount() {
    if (this.props.addressData) {
      const { province, city, area, provinceName, cityName, areaName } =
        this.props.addressData;
      this.setState(
        {
          province: Number(province),
          city: Number(city),
          area: Number(area),
          provinceName,
          cityName,
          areaName,
        },
        async () => {
          await this.getEditProvince();
        }
      );
    }
  }

  getEditProvince = async () => {
    const res = await apiGetDBAreaList({ level: 1, areaParentId: 1 });
    if (res.code === 0 && res.data.length > 0) {
      this.setState({
        provinceList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
      });
      let province = this.state.province;
      let provinceName = this.state.provinceName;
      this.props.setAreaData({
        province: province,
        provinceName,
        city: "",
        cityName: "",
        area: "",
        areaName: "",
      });
      await this.getEditCity(~~province);
    }
  }

  getEditCity = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 2, areaParentId });
    if (res.code === 0 && res.data.length > 0) {
      await this.setState({
        cityList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
      });
      const { city, province, cityName, provinceName } = this.state;
      this.props.setAreaData({
        province,
        city,
        cityName,
        provinceName,
        area: "",
        areaName: "",
      });
      await this.getEditArea(city);
    }
  }

  getEditArea = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 3, areaParentId });
    if (res.code === 0) {
      await this.setState({
        areaList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
      });
      const { province, city, area, provinceName, cityName, areaName } =
        this.state;
      this.props.setAreaData({
        province,
        city,
        area,
        provinceName,
        cityName,
        areaName,
      });
    }
  }

  /**
   * 获取省份信息
   * */
  getProvince = async () => {
    const res = await apiGetDBAreaList({ level: 1, areaParentId: 1 });
    if (res.code === 0 && res.data.length > 0) {
      this.setState({
        provinceList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
      });
      let province = this.state.province;
      let provinceName = this.state.provinceName;
      this.props.setAreaData({
        province: province,
        provinceName,
        city: "",
        cityName: "",
        area: "",
        areaName: "",
      });
      await this.getCity(~~province);
    }
  };
  /**
   * 获取市级信息
   * */
  getCity = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 2, areaParentId });
    if (res.code === 0 && res.data.length > 0) {
      await this.setState({
        cityList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
        city: res.data[0].areaId,
        cityName: res.data[0].areaName,
      });
      const { city, province, cityName, provinceName } = this.state;
      this.props.setAreaData({
        province,
        city,
        cityName,
        provinceName,
        area: "",
        areaName: "",
      });
      await this.getArea(city);
    }
  };
  /**
   * 获取区级信息
   * */
  getArea = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 3, areaParentId });
    if (res.code === 0) {
      await this.setState({
        areaList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
        area: res.data[0].areaId,
        areaName: res.data[0].areaName,
      });
      const { province, city, area, provinceName, cityName, areaName } =
        this.state;
      this.props.setAreaData({
        province,
        city,
        area,
        provinceName,
        cityName,
        areaName,
      });
    }
  };
  /**
   * 省市区下拉切换事件
   * */
  onChange = async (id, level, name) => {
    switch (~~level) {
      case 1:
        this.setState(
          {
            province: id,
            provinceName: name.label,
            city: "",
            area: "",
          },
          async () => {
            await this.getCity(id);
            this.reload();
          }
        );
        break;
      case 2:
        this.setState(
          {
            city: id,
            cityName: name.label,
            area: "",
          },
          async () => {
            await this.getArea(id);
            this.reload();
          }
        );
        break;
      case 3:
        this.setState(
          {
            area: id,
            areaName: name.label,
          },
          () => {
            this.reload();
          }
        );
        break;
      default:
        break;
    }
  };
  /**
   * @desc 刷新省，市，区数据
   * */
  reload = () => {
    const { province, city, area, provinceName, cityName, areaName } =
      this.state;
    this.props.setAreaData({
      province,
      city,
      area,
      provinceName,
      cityName,
      areaName,
    });
  };

  render() {
    const { provinceList, cityList, areaList, province, city, area } =
      this.state;
    return (
      <Space>
        <Select
          value={province}
          options={provinceList}
          placeholder="请选择省"
          onChange={(e, input) => this.onChange(e, 1, input)}
        />
        <Select
          value={city}
          options={cityList}
          placeholder="请选择市"
          onChange={(e, input) => this.onChange(e, 2, input)}
        />
        <Select
          value={area}
          options={areaList}
          placeholder="请选择区"
          onChange={(e, input) => this.onChange(e, 3, input)}
        />
      </Space>
    );
  }
}

TheAreaEditor.propTypes = {
  addressData: PropTypes.object,
};
TheAreaEditor.defaultProps = {};

export default TheAreaEditor;
